<template>
  <div class="side transiti">
    <div class="side-title">
      <em>COCEE</em>
      <h4>{{ sideData.title }}</h4>
    </div>

    <div class="side-content">
      <ul class="clearfix">
        <li v-for="item in sideData.columnList" @click="selectNewList(item)">
          <i class="el-icon-arrow-right"></i>
          {{ item.content }}
        </li>
      </ul>
    </div>

    <div class="loading-wrap" v-show="!sideLoading">
      <loading></loading>
    </div>

    <div class="side-btn">
      <i class="el-icon-d-arrow-left"></i>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Loading from 'base/loading/loading'
  import $ from 'jquery'

  export default {
    props: {
      sideData: {
        type: Object,
        default: {}
      },
      sideLoading: {
        type: Boolean,
        default: false
      }
    },
    created() {
      this.bindEvent()
    },
    methods: {
      bindEvent() {
        $(function () {
          $('.side-btn').click(function () {
            if (!this.btn) {
              $('.side').removeClass('leave').addClass('active')
              this.btn = true
            } else {
              $('.side').removeClass('active').addClass('leave')
              this.btn = false
            }
          })
        })
      },
      selectNewList(item) {
        this.$emit('selectNewList', item)
      }
    },
    components: {
      Loading
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .side
    position: relative
    float: left;
    min-height: 760px
    width: 200px
    padding: 20px 0 20px 5px
    border-left: 1px solid $vice-color
    &.active
      left: 0px
    &.leave
      left: -216px
    .side-title
      em
        font-style: normal
        sc(40px, #eee)
        font-weight: bold
        color: $vice-color
      h4
        margin-top: 10px
        sc(30px, $back)
        font-weight: 900
    .side-content
      position: relative
      margin-top: 40px
      li
        hh(34px)
        padding-left: 10px
        border-bottom: 1px solid #ccc
        cursor: pointer;
        &:first-child
          border-top: 1px solid #ccc
        a
          display: inline-block
          padding: 0 30px 0 5px
          &:hover
            text-decoration: underline
            color: $vice-color
    .side-btn
      rtp(-50px, 50%)
      wh(50px, 50px)
      z-index: 101
      margin-top: -25px
      line-height: 50px
      sc(34px, $white)
      background-color: $vice-color
      text-align: center
      border-radius: 0 10px 10px 0
      cursor: pointer;
.loading-wrap
  rtp(0, 0)
  bottom: 40px
  left: 0
  background-color: rgba(0,0,0,.4)

@media (min-width: 1200px)
  .side
    text-align: left

@media (max-width: 1220px)
  .side
    text-align: left

@media (max-width: 828px)
  .side
    text-align: left

@media (max-width: 788px)
  .side
    position: absolute
    left: -206px
    top: 0
    z-index: 1000
    color: $vice-color
    background-color: rgba(0, 0, 0 .9)
    text-align: center
    .side-title
      h4
        color: $white
    .side-content
      li
        a
          color: $white

@media (min-width: 788px)
  .side
    &.leave
      left: 0
    &.ative
      left: 0
    .side-btn
      display: none

@media (max-width: 496px)
  .side
    text-align: center
    .side-btn
      display: block


</style>
